import {Image, StyleSheet, View, Text, TouchableOpacity, Modal, ScrollView} from 'react-native';
import {Stack, useRouter} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import { Ionicons } from '@expo/vector-icons';
import {useEffect, useState} from "react";
import {ImageBackground} from "expo-image";
import headerBg from '@/assets/images/releaseImg/groupProfileBg.png'
import groupProfileBodyBg from "@/assets/images/releaseImg/groupProfileBodyBg.png"
import avator from "@/assets/images/me/avator.png";
import profileAdressBg from "@/assets/images/releaseImg/profileAdressBg.png"
import wrapBg from "@/assets/images/releaseImg/wrapBg.png"
import wrapIcon from "@/assets/images/releaseImg/wrapIcon.png"
import qutationIcon from "@/assets/images/releaseImg/qutationIcon.png"

export default function GroupProfileCardComponent({ visible, show, hide, data }) {

    const router = useRouter();

    return (
        <Modal
            animationType="fade"
            transparent={true} // 使Modal背景透明
            visible={visible}
        >
            <TouchableOpacity onPress={hide} style={styles.cardContainer}>
            </TouchableOpacity>
            <View style={[styles.cardWrap]}>
                <ImageBackground source={headerBg} style={styles.headerBg} resizeMode="cover">
                    <ImageBackground style={styles.cardInfo} source={groupProfileBodyBg} >
                        <View style={styles.cardBody}>
                            <View style={styles.info}>
                                <View style={styles.nickname}>
                                    <Text style={styles.nicknameText}>{ data?.nickname }</Text>
                                </View>
                                <View style={styles.wechat}>
                                    <Text style={styles.wechatText}>微信号：{ data?.wechat }</Text>
                                </View>
                                <View style={{ flexDirection: "row", width: 300, }}>
                                    {
                                        data?.tags?.map((item: any, index: number) => {
                                            return (
                                                <View style={styles.tag} key={index}>
                                                    <Text style={styles.tagText}>{ item }</Text>
                                                </View>
                                            )
                                        })
                                    }

                                </View>

                            </View>
                            <View style={styles.avator}>
                                <Image source={{ uri: data?.avatarUrl }} style={{ width: "100%", height: "100%" }}/>
                            </View>
                        </View>
                        <View style={styles.profileFooter}>
                            <ImageBackground source={profileAdressBg} style={styles.profileAdress} resizeMode="contain">
                                <View style={styles.address}>
                                    <Text style={styles.addressText}>
                                        常住地：{ data?.residence }
                                    </Text>
                                </View>
                            </ImageBackground>
                            <ImageBackground source={wrapBg} style={styles.wrapWrap} resizeMode="contain">
                                <TouchableOpacity style={styles.wrap}>
                                    <Image source={wrapIcon} style={styles.wrapIcon}/>
                                    <Text style={styles.wrapText}>交换</Text>
                                </TouchableOpacity>
                            </ImageBackground>
                        </View>
                    </ImageBackground>
                </ImageBackground>
                <ScrollView style={[styles.profileItenContainer, { flex: 1 } ]}>
                    {
                        data?.cards?.map((item: any, index: number) => {
                            return (
                                <View style={styles.profileItem} key={index}>
                                    <View style={styles.profileItemTitle}>

                                        <Text style={styles.profileItemTitleText}>
                                            { item?.cardTitle }
                                        </Text>
                                        <View style={[styles.heng, { width: item?.cardTitle.length * 14 }]}></View>
                                    </View>
                                    <View style={styles.profileContent}>
                                        <Text>
                                            {
                                                item?.cardContent
                                            }
                                        </Text>
                                        <View style={styles.qutationIcon}>
                                            <Image source={qutationIcon} style={{ width: "100%", height: "100%" }} />
                                        </View>
                                    </View>
                                </View>
                            )
                        })
                    }
                </ScrollView>
            </View>
        </Modal>
    );
}

const styles = StyleSheet.create({
    cardContainer: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.6)', // 设置半透明背景
        position: "absolute",
        width: "100%",
        height: "100%",
    },
    cardWrap: {
        position: "absolute",
        bottom: 0,
        left: 0,
        width: "100%",
        backgroundColor: "#fff",
        borderTopRightRadius: 6,
        borderTopLeftRadius: 6,
        overflow: "hidden",
        paddingBottom: 83,
        height: 700,
    },
    headerBg: {
        // height: 200,
        flexDirection: "row",
        justifyContent: "center",
    },
    cardInfo: {
        width: scaleSize(351),
        height: 149,
        marginTop: 18,
        borderRadius: 8,
        overflow: "hidden",
    },
    avator: {
        width: 60,
        height: 60,
    },
    cardBody: {
        flexDirection: "row",
        alignItems: "center",
        marginTop: 20,
        padding: 12,
    },
    info: {
        flex: 1,
    },
    nickname: {

    },
    nicknameText: {
        fontSize: 18,
        fontWeight: "bold",
    },
    wechat: {
        marginTop: 3,
    },
    wechatText: {
        fontSize: 12,
        color: "#676978"
    },
    tag: {
        paddingHorizontal: 6,
        marginTop: 10,
        paddingVertical: 3,
        flexDirection: "row",
        justifyContent: "center",
        backgroundColor: "rgba(255,70,0,0.1)",
        borderRadius: 10,
        marginRight: 5,
    },
    tagText: {
        fontSize: 8,
        color: "#EC6138",
    },
    profileFooter: {
        flexDirection: "row",
        flex: 1,
        // height: 14,
    },
    profileAdress: {
        flex: 1,
        flexDirection: "row",
        alignItems: "center",
        height: "100%"
    },
    wrapWrap: {
        width: 81,
        marginLeft: 6,
        flexDirection: "row",
        alignItems: "center",
        height: "100%"
    },
    address: {
        marginLeft: 12,
    },
    addressText: {
        fontSize: 12,
        color: "#fff",
    },
    wrap: {
        flexDirection: "row",
        justifyContent: "center",
        alignItems: 'center',
        margin: "auto",
    },
    wrapText: {
        fontSize: 12,
        color: "#fff",
        marginLeft: 4,
    },
    wrapIcon: {
        width: 14,
        height: 14,
    },
    profileItenContainer: {
        paddingHorizontal: 12,
        marginTop: 10,
    },
    profileItem:{

    },
    profileItemTitle: {
        flexDirection: "row",
        marginTop: 10,
    },
    profileItemTitleText: {
        fontSize: 14,
        fontWeight: "bold",
        position: "relative",
        zIndex: 99
    },
    heng: {
        position: "absolute",
        height: 5,
        backgroundColor: "#EC6138",
        left: 0,
        bottom: 2,
    },
    profileContent: {
        backgroundColor: "#FAFAFA",
        paddingTop: 29,
        paddingBottom: 20,
        paddingLeft: 6,
        paddingRight: 7,
        borderRadius: 10,
        marginTop: 10,
        position: "relative"
    },
    qutationIcon: {
        position: "absolute",
        top: -5,
        left: 5,
        width: 20,
        height: 20,
    },
});
